<template>
	<view class="index">
		<!-- 顶栏滑块 -->
		<scroll-view scroll-x="true" class="scoll-content" :scroll-into-view="scrollIndex">
			<view
				:id="'top'+index"
				class="scroll-item"
				v-for="(item,index) in topBar"
				:key='index'
				@tap="changeTab(index)">
				<text :class='topBarIndex === index? "f-active-color" : "f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
		<view class="f-color" @tap="goSearch">搜索</view>
		<!-- 内容块高度 :style="'height:'++' ;'" -->
		<swiper @change='onChangeTab' :current="topBarIndex" :style="'height:'+clentHeight+'px;'">
			<swiper-item
				v-for="(item,index) in newTopBar"
				:key='index'
			>
				<scroll-view scroll-y="true" :style="'height:'+clentHeight+'px;'" @scrolltolower="loadMore(index)">
					<block v-if="item.data.length > 0">
						<block v-for="(k,i) in item.data" :key="i">
							<!-- 推荐 -->
							<IndexSwiper v-if='k.type === "swiperList"' :dataList='k.data'></IndexSwiper>
							
							<template v-if='k.type === "recommendList"'>
								<Recommend :dataList='k.data'></Recommend>
								<Card cardTitle="猜你喜欢"></Card>
							</template>
							
							<!--运动户外-->
							<Banner v-if='k.type==="bannerList"' :dataList='k.imgUrl'></Banner>
							
							<template v-if='k.type==="iconsList"'>
								<Icons :dataList='k.data'></Icons>
								<Card cardTitle="热销爆品"></Card>
							</template>
							
							<template v-if='k.type==="hotList"'>
								<Hot :dataList='k.data'></Hot>
								<Card cardTitle="推荐店铺"></Card>
							</template>
							
							<template v-if='k.type==="shopList"'>
								<Shop :dataList='k.data'></Shop>
								<Card cardTitle="为您推荐"></Card>
							</template>
							
							<CommodityList v-if='k.type==="commodityList"' :dataList='k.data'></CommodityList>
						</block>
					</block>
					<view v-else>
						暂无数据.....
					</view>
					<view class="load-text f-color">
						{{item.loadText}}
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<Tabbar cureentPage = 'index'></Tabbar>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import IndexSwiper from '@/components/index/IndexSwiper.vue'
	import Recommend from '@/components/index/Recommend.vue'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import Banner from '@/components/index/Banner.vue'
	import Icons from '@/components/index/Icons.vue'
	import Hot from '@/components/index/Hot.vue'
	import Shop from '@/components/index/Shop.vue'
	import Tabbar from '@/components/common/Tabbar.vue'
	export default {
		data(){
			return {
				//选中索引
				topBarIndex:0,
				//顶栏的滑动内容也跟随
				scrollIndex:'top0',
				//内容块的高度值
				clentHeight:0,
				//顶栏数据
				topBar:[],
				//承载数据,放入topBar的内部数据
				newTopBar:[]
			}
		},
		components:{
			IndexSwiper,
			Recommend,
			Card,
			CommodityList,
			Banner,
			Icons,
			Hot,
			Shop,
			Tabbar
		},
		//点击标题按钮触发事件
		// onNavigationBarButtonTap(e) {
		// 	if(e.float == 'left'){
		// 		uni.navigateTo({
		// 			url:'../search/search'
		// 		})
		// 	}
		// },
		onLoad(){
			this.__inint();
			
		},
		onReady() {
			//获取可视区域的高度
			uni.getSystemInfo({
				success: (res) => {
					// this.clentHeight = res.windowHeight - uni.upx2px(80)-this.getClientHeight();
					this.clentHeight = res.windowHeight-this.getClientHeight();
				}
			})
		},
		methods:{
			//初始化数据
			__inint(){
				$http.request({
					url:"/index_list/data"
				}).then((res)=>{
					// console.log(res);
					this.topBar = res.topBar;
					this.newTopBar = this.initData(res);
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:'none'
					})
				})
			},
			//获取首页数据
			initData(res) {
				let arr = [];
				for(let i=0; i<this.topBar.length;i++){
					let obj ={
						data:[],
						load:"first",
						loadText:"上拉加载更多..."
					}
					//获取首次的数据
					if(i == 0){
						obj.data = res.data;
					}
					arr.push(obj);
				}
				return arr;
			},
			//点击顶栏
			//给当前位置，赋值
			changeTab(index){
				if(this.topBarIndex === index){
					return
				}else{
					this.topBarIndex = index;
					this.scrollIndex = "top"+index;
					//每一次滑动赋值为 first，然后请求一次数据
					if( this.newTopBar[this.topBarIndex].load === "first"){
						this.addData();
					}
				}
			},
			//对应滑动
			onChangeTab(e){
				// e.detail.current得到当前滑块的位置信息，点击了那个值
				this.changeTab(e.detail.current);
			},
			//获取可视区域高度【兼容】
			getClientHeight(){
				// 不同手机类型的头部区域高度
				const res = uni.getSystemInfoSync();
				// res.platform 获取手机类型
				const system = res.platform;
				if( system ==='ios' ){
					//状态栏的高度值 statusBarHeight
					return 44+res.statusBarHeight;
				}else if( system==='android' ){
					return 48+res.statusBarHeight;
				}else{
					return 0;
				}
			},
			//对应显示不同模块的数据
			addData(callback){
				//拿到索引
				let index = this.topBarIndex; //0-1-2-3
				//id为不同的版块
				let id = this.topBar[index].id;
				/*	
					数字有重复.....有bug
					page会多次为3,需要调整............................................
				*/
				let page = Math.ceil(this.newTopBar[index].data.length / 5) + 1;
				// console.log(page);
				//请求数据
				$http.request({
					url:'/index_list/'+id+'/data/'+page+''
				}).then((res)=>{
					this.newTopBar[index].data = [...this.newTopBar[index].data,...res];
				}).catch(()=>{
					uni.showToast({
						title:"请求失败",
						icon:'none'
					})
				})
				//请求结束之后，将first修改为Last
				this.newTopBar[index].load= "last";
				if(typeof callback === "function"){
					callback();
				}
			},
			//上拉加载更多
			loadMore(index) {
				this.newTopBar[index].loadText="加载中...";
				//触底加载更多数据
				this.addData(() =>{
					//请求结束，文字信息又换成上拉加载更多
					this.newTopBar[index].loadText="加载更多...";
				})
			},
			//跳转到搜索页面
			goSearch() {
				uni.navigateTo({
					url:'../search/search'
				})
			}
		}
		
	}
</script>

<style scoped>
/* 标题栏 */
.wx-nav {
	text-align: center;
	height: 200rpx;
	width: 100%;
	line-height: 200rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rpx;
}
.scoll-content{
	margin-top: 5rpx;
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
}
.scroll-item {
	display: inline-block;
	padding: 10rpx 30rpx;
	font-size: 36rpx;
	/* font-weight: bold; */
}
.f-active-color {
	padding: 10rpx 0;
	border-bottom: 10rpx solid #49BDFB;
}
/* 上拉加载更多的样式 */
.load-text {
	border-top: 2rpx solid #636263;
	line-height: 60rpx;
	text-align: center;
}
</style>